<template>
  <div class="tab-box" v-if="infoList && infoList.length != 0">
    <!-- <el-row>
      <el-col :span="8" v-for="(item, index) in infoList" :key="index" class="col"> -->
    <div class="info-item" v-for="(item, index) in infoList" :key="index">
      {{ item?.key }}:{{ item?.value }}
    </div>
    <!-- </el-col>
    </el-row> -->
  </div>
  <template v-else>
    <el-empty description="暂无数据" :image-size="130" :image="Empty" />
  </template>
</template>
<script setup lang="ts">
  import Empty from '@/assets/images/device-monitor/empty.png'
  defineProps({
    infoList: Array
  })
</script>

<style scoped lang="scss">
  .info-item {
    color: #202121;
    font-size: 12px;
    height: 30px;
    line-height: 30px;
    padding-left: 14px;
    box-sizing: border-box;
  }
  .tab-box {
    height: 480px;
    display: flex;
    flex-wrap: wrap; /* 允许换行 */
    /* gap: 10px; 设置间距 */
  }

  .tab-box div {
    flex: 0 0 33.33%; /* 一行三个，减去间距 */
    /*  flex: 0 0 calc(33.33% - 10px); 一行三个，减去间距 */
    box-sizing: border-box;
  }

  /* 背景色规则与Grid方案相同 */
  .tab-box div:nth-child(6n + 1),
  .tab-box div:nth-child(6n + 2),
  .tab-box div:nth-child(6n + 3) {
    background-color: #f2f3f5;
  }
  .tab-box div:nth-child(6n + 4),
  .tab-box div:nth-child(6n + 5),
  .tab-box div:nth-child(6n + 6) {
    background-color: #fff;
  }
</style>
